<template>
  <div id="app">
    <!--<canvas id="JsBarcode" width="800" height="300">canvas</canvas>-->

    <!--<canvas id="canvas-todo" width="200" height="200" style="border: 1px solid #888">canvas</canvas>-->

    <!--<svg id="code128"></svg>-->
    <!--<svg id="ean-13"></svg>-->
    <!--<svg id="ean-8"></svg>-->
    <!--<svg id="ean-5"></svg>-->
    <!--<svg id="ean-2"></svg>-->
    <!--<svg id="upc-a"></svg>-->
    <!--<svg id="code39"></svg>-->
    <!--<svg id="itf-14"></svg>-->
    <!--<svg id="msi"></svg>-->

    <!--<svg id="pharmacode"></svg>-->
    <router-view></router-view>

    <!--<input type="text" v-model="barCodeStr" @blur="inputBarStr"/>-->
    <!--<img src="/src/assets/logo.png" style=""/>-->

  </div>
</template>

<script>
  import 'fabric'
export default {
  name: 'app',
  data () {
      return {
          barCodeStr: '123333'
      }
  },
  mounted () {
//    let JsBarcode = require('jsbarcode');
//    let options = {
//      format:"CODE128",
//      displayValue:true,
//      fontSize:18,
//      height:100
//    };
//    JsBarcode('#JsBarcode', "12356897", options,);
//
//    let canvas = document.getElementById("canvas-todo");
//    let context = canvas.getContext("2d");
//
//    let bark = new Image();
//    bark.src = 'logo.png';
//    bark.onload = function () {
//      context.drawImage(bark, 0, 200, 200, 100)
//    }
//    this.drawLine(context);
//    this.addImage(context)
//    this.gradient(context);
//    this.createTree(context);


//    let Canvas = require("canvas");
//    var fs = require("fs-extra");
//    let option = {
//      width: 2,//较细处条形码的宽度
//      height: 100, //条形码的宽度，无高度直接设置项，由位数决定，可以通过CSS去调整，见下
//      quite: 10,
//      format: "CODE128",
//      displayValue: false,//是否在条形码下方显示文字
//      font:"monospace",
//      textAlign:"center",
//      textMargin: 15,
//      fontSize: 12,
//      backgroundColor:"",
//      lineColor:"#000"//条形码颜色
//    }
//    JsBarcode('#test', "Hello", options,);
//    JsBarcode("#code128", "Hi!");
//    JsBarcode("#ean-13", "1234567890128", {format: "ean13"});
//    JsBarcode("#ean-8", "12345670", {format: "ean8"});
//    JsBarcode("#ean-5", "12345", {format: "ean5"});
//    JsBarcode("#ean-2", "12", {format: "ean2"});
//    JsBarcode("#upc-a", "123456789012", {format: "upc"});
//    JsBarcode("#code39", "Hello", {format: "code39"});
//    JsBarcode("#itf-14", "1234567890123", {format: "itf14"});
//    JsBarcode("#msi", "123456", {format: "msi"});
  },
  methods: {
    inputBarStr () {
      console.log(this.barCodeStr)
      if (this.barCodeStr) {
        let JsBarcode = require('jsbarcode');
        JsBarcode("#pharmacode", this.barCodeStr, {format: "code128"});
      }
    },
    drawLine (context) {
      context.lineWidth = 4;
      context.beginPath();
      context.moveTo(140, 140);
      context.lineTo(140, 50);
      context.stroke()
    },
    tranSlate (context) {
      context.save();

      context.translate(70,140);// 变换状态

      context.beginPath();
      context.moveTo(0, 0);     // 变换为（70， 140）
      context.lineTo(70, -70);  // 变换为（140，70）
      context.stroke();

      context.restore();        // 恢复状态
    },
    createTree (context) {
      context.beginPath()
      context.lineWidth = 4;
      context.lineJoin = 'round';
      context.strokeStyle = '#669';
      context.fillStyle = '#66d';

      context.save();
      context.translate(140,140);

      context.beginPath();

      context.moveTo(0,0);
      context.lineTo(30, 50);
      context.lineTo(-30, 50);

      context.closePath();
      context.fill();
      context.stroke();

      context.restore();
    },
    gradient (ctx) {
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.moveTo(0,0);
      ctx.lineTo(150,50);
      ctx.lineTo(0,100);

      //定义线性渐变对象，设定渐变线起始点和结束点坐标，坐标格式为(起始点x,起始点y,结束点x,结束点y)
      let grd = ctx.createLinearGradient(0,0,170,0);
      grd.addColorStop(0,"black");   //定义渐变线起点颜色
      grd.addColorStop(0.5,"red");   //定义渐变线中间点的颜色
      grd.addColorStop(1,"yellow");  //定义渐变线结束点的颜色

      ctx.strokeStyle = grd;   //将渐变对象赋值给strokeStyle
//      ctx.fillStyle = grd;
//      ctx.fill()
      ctx.stroke();  //描边
    },
    addImage (context) {
//      context.beginPath()
      let img = new Image();
//      img.src = '/src/assets/logo.png';
      img.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558870/o_5.jpg";   //定义图片的映射地址

      img.onload = loadImage(context)

      function loadImage(context) {
        //定义Pattern对象，设定填充图案为pic图片，填充形式为平铺
        let redTexture = context.createPattern(img, "repeat");
        context.strokeStyle = redTexture;     //定义描边样式为上一行设定的Pattern描边
        context.moveTo(80,100);
        context.lineTo(10,170);
        context.lineWidth = 8;    //定义线段粗度为8像素
        context.stroke();
      }
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /*margin-top: 60px;*/
}
</style>
